<template>
	<el-container class="header-container">
		<el-header>
			<el-dropdown placement="bottom">
				<span class="el-dropdown-link">{{username}}</span>
				<el-dropdown-menu slot="dropdown">
					<el-dropdown-item>设置</el-dropdown-item>
					<el-dropdown-item @click="logout()">退出</el-dropdown-item>
				</el-dropdown-menu>
			</el-dropdown>
		</el-header>
	</el-container>
</template>

<script>
	export default {
		name: 'base-header',
		data() {
			return {
				username: ""
			};
		},
		created() {
			this.query();
		},
		methods: {
			query() {
				this.api.user.queryInfo().then(result => {
					result = result.data;
					if (result.code === 200) {
						this.username = result.data.name;
					} else {
						this.$message(result.message);
					}
				}).catch(() => {
					this.$message('网络错误');
				});
			},
			logout() {
				this.$confirm("确定退出嘛").then(() => {
					localStorage.removeItem("current_user");
				});
			}
		}
	}
</script>

<style scoped>
	.el-header {
		text-align: right;
		font-size: 12px;
		background-color: #B3C0D1;
		color: #333;
		line-height: 60px;
	}
	.el-dropdown-link {
		cursor: pointer;
		margin-right: 20px;
	}
</style>
